<template>
  <div>

	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				
				<Breadcrumb :datas="datas"></Breadcrumb>


			</div>

			<div>
				
				<table>

					<tr>
						
						<td>

							商品分类:
							
						</td>

						<td>

							<Select v-model="selected" :datas='category'></Select>
							
						</td>


					</tr>


					<tr>
						
						<td>

							商品名称:
							
						</td>

						<td>

							<input type="text" v-model="name" placeholder="请输入商品名称">
							
						</td>


					</tr>


					<tr>
						
						<td>

							商品价格:
							
						</td>

						<td>

							<input type="number" v-model="price">
							
						</td>


					</tr>


					<tr>
						
						<td>

							颜色:
							
						</td>

						<td>

						<input type="text" v-model="color" />

			
							
						</td>


					</tr>

          <tr>
            
            <td>

              号码:
              
            </td>

            <td>

            <input type="text" v-model="size" />

      
              
            </td>


          </tr>

          <tr>
            
            <td>

              季节:
              
            </td>

            <td>

            <input type="text" v-model="season" />

      
              
            </td>


          </tr>


          <tr>
            
            <td>

      
              
            </td>

            <td>

            
            <Button @click="submit">添加商品</Button>

      
              
            </td>


          </tr>

					




				</table>


			</div>



		</div>
	</section>
	

	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导入组件
import myheader from './myheader.vue'

//导入文件
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //原始商品数据
      categorylist:[],
      //分类默认选中
      selected:'手机',
      //商品分类
      category:[],
      //名称
      name:'',
      price:0,
      color:'',
      size:'',
      season:'',
      //面包屑导航变量
      datas:[{title:'首页',route:{name:'index'}},{title:'添加商品'}]
    }
  },
  //注册组件标签
  components:{

  	'myheader':myheader

  },
  mounted:function(){

    this.get_categoty();

  
},
  methods:{

    //获取商品分类
    get_categoty(){

      //发送请求
      this.axios.get('http://localhost:8000/categorylist/').then((result) =>{

        console.log(result);
        
        var mycate = []
        
        //二次处理
        for(let i=0;i<result.data.length;i++){

            mycate.push(result.data[i]['name'])

        }
        //赋值操作
        this.category = mycate
        this.categorylist = result.data

      });

    },


    //添加商品逻辑
    submit:function(){

      //获取分类名称对应的id   
      var categorylist = this.categorylist
      for(let i=0;i<this.categorylist.length;i++){

          if(categorylist[i]['name'] == this.selected){
              var cid = categorylist[i]['id']
          }

      }

      
      var param = {};

      param['color'] = this.color;
      param['size'] = this.size;
      param['season'] = this.season;

      console.log(param);

      //转换字符串
      param = JSON.stringify(param);

      console.log(param);

      //发送请求
      this.axios.get('http://localhost:8000/insertgoods/',{params:{name:this.name,price:this.price,cid:cid,params:param}}).then((result) =>{

        console.log(result);

        this.$Message(result.data.mes);

      });


    }
     
  }
}


</script>
 
<style>

td {
	padding:10px;
}

.imgcode {
	cursor:pointer;
}




</style>